<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--引入 Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="themes/bootstrap/easyui.css" rel="stylesheet">
<!-- 引入主题下的图标样式 -->
<link href="themes/icon.css" rel="stylesheet">
<!-- 引入js下的相应的js文件 -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easyui.min.js"></script>
<script src="js/easyui-lang-zh_CN.js"></script>
<script src="js/jquery.min.js"></script>
<!-- 引入自定义的修改table表格线条颜色的样式 -->
<!--就近原则  -->
<link href="css/bootstraptablecolor.css" rel="stylesheet">
<title>购物车</title>
<style type="text/css">
#DHa{
	position:relative;
	top:5px;
}
#shoptab {
	margin-top: 60px;
}

th {
	font-size: 20px;
	font-weight: 4px;
	color: red;
}

#td1 {
	margin-top: 30%;
}

a {
	color: black;
	position: relative;
	top: 8px;
}

a:hover {
	color: red;
}
</style>
<script type="text/javascript">
	//全选函数	
	$(function() {
		$("#allselect").click(function() {
			if ($("#allselect").is(':checked')) {
				$("[name='sel']").each(function() {
					this.checked = true
				});
			} else {
				$("[name='sel']").each(function() {
					this.checked = false
				});
			}
		});
	});
</script>
</head>
<body>
	<!-- 顶部导航条 -->
	<div style="background-color:#BFBDC2">
		<div  class="container-fluid">
			<div class="navbar-header">
				<a id="DHa" href="#" ><img alt="加载失败" src="img/elmlogo.png" style="width:70px;heigth:30px"/></a></div>
			<div>
				<ul class="nav navbar-nav navbar-right" style="margin-right: 50px">
					<li><a href="#"><img alt="" src="img/order.png">我的订单</a></li>
					<li><a href="#"><img alt="" src="img/shoppingcar.png">我的购物车</a></li>
					<li><a href="#"><img alt="" src="img/favorite.png" style="">我的收藏</a></li>					
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown">我的信息<span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">收货地址修改</a></li>
							<li class="divider"></li>
							<li><a href="#">密码更改</a></li>
							<li class="divider"></li>
						</ul>
					</li>
						<li><a href="#">退出登录</a></li>
				</ul>
			</div>
		</div>
	</div>
<!-- 内容主体 -->
	<div class="row">
	<div class="col-md-1"></div>
		<div class="col-md-3">
			<a href="#"><img alt="加载失败" src="img/shoppinglogo.png"
				style="width: 200px; heigth: 70px;margin-top:20px" /></a>
		</div>
	</div>
	<div id="shoptab" class="table table-hover row">
		<div class="col-md-2"></div>
		<div class="col-md-8">
			<div>
				<!-- 购物车表格 -->
				<table class="table" style="bordercolor:2px solid red">
					<thead>
						<tr>
							<th>菜品名称</th>
							<th>数量</th>
							<th>价格</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td id="td1"><input name="sel" type="checkbox"
								style="width: 20px" />产品1<img alt="加载失败"
								src="img/nimingzhe.png" style="width: 100px; heigth: 100px"></td>
							<td>3</td>
							<td>15</td>
							<td><button type="button"
									class="btn btn-danger glyphicon glyphicon-trash btn-sm">删除</button></td>
						</tr>
						<tr>
							<td id="td1"><input name="sel" type="checkbox"
								style="width: 20px" />产品2<img alt="加载失败"
								src="img/nimingzhe.png" style="width: 100px; heigth: 100px"></td>
							<td>3</td>
							<td>15</td>
							<td><button type="button"
									class="btn btn-danger glyphicon glyphicon-trash btn-sm">删除</button></td>
						</tr>
						<tr>
							<td id="td1"><input name="sel" type="checkbox"
								style="width: 20px" />产品3<img alt="加载失败"
								src="img/nimingzhe.png" style="width: 100px; heigth: 100px"></td>
							<td>3</td>
							<td>15</td>
							<td><button type="button"
									class="btn btn-danger glyphicon glyphicon-trash btn-sm">删除</button></td>
						</tr>
						<tr>
							<td id="td1"><input name="sel" type="checkbox"
								style="width: 20px" />产品4<img alt="加载失败"
								src="img/nimingzhe.png" style="width: 100px; heigth: 100px"></td>
							<td>3</td>
							<td>15</td>
							<td><button type="button"
									class="btn btn-danger glyphicon glyphicon-trash btn-sm">删除</button></td>
						</tr>
					</tbody>
				</table>
				<!-- 底部工具条 -->
				<div class="row" style="background-color: #DDDDDD">
					<div class="col-md-2">
						<input id="allselect" type="checkbox"
							style="width: 20px; margin-top: 10px" /><label>全选</label>
					</div>
					<div class="col-md-2">
						<a style="margin-top: 8px" href="#">删除</a>
					</div>
					<div class="col-md-3"></div>
					<div class="col-md-1" style="margin-top: 8px">已选</div>
					<div class="col-md-2" style="margin-top: 8px">合计： 元</div>
					<div class="col-md-2">
						<button type="button"
							class="btn btn-success glyphicon glyphicon-ok">结算</button>
					</div>
				</div>
			</div>
		</div>
</body>
</html>